<!-- #layout name=blank -->
<style>
    .edit-label-btn {
        opacity: 0;
    }
    
    .panel:hover .edit-label-btn {
        opacity: 1;
    }
</style>
<div class="page-header">
    <h1 data-bind="text: Kooboo.text.common.Label + ' - ' + mutliLangName()" class="title"></h1>
</div>
<div data-bind="component: { name: 'kb-breadcrumb', params:[{
    name: 'SITES'
},{
    name: 'DASHBOARD'
},{
    name: mutliLangName(),
    url: '#'
},{
    name: Kooboo.text.common.Labels
}]}"></div>
<div class="row" data-bind="visible: !labels().length">
    <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12" style="margin-top: 40px;">
        <div class="panel panel-default">
            <div class="panel-body">
                <blockquote>
                    <p class="text-danger">You can use label to create your multilanguage content.</p>
                    <footer>You don't have a label yet</footer>
                </blockquote>
            </div>
            <div class="panel-footer" data-bind="text: Kooboo.text.common.empty"></div>
        </div>
    </div>
</div>
<div class="row label-list">
    <!-- ko if: labels().length -->
    <!-- ko foreach: { data: labels, as: 'label', afterRender: rendered } -->
    <div class="col-md-4 col-sm-6 col-xs-12 item">
        <div class="panel panel-default">
            <div class="panel-body">
                <blockquote style="padding-bottom: 0;">
                    <p class="margin-bottom-15" data-bind="text: label.multilingual() || Kooboo.text.site.multiLang.noTranslation, css: { 'text-danger': !label.multilingual() }, attr: { title: Kooboo.text.site.label.translatedValue }"></p>
                    <blockquote>
                        <p data-bind="text: label.defaultValue, attr: { title: Kooboo.text.site.label.originalValue }"></p>
                        <footer data-bind="text: label.name(), attr: { title: Kooboo.text.site.label.key }"></footer>
                    </blockquote>
                </blockquote>
            </div>
            <div class="panel-footer clearfix">
                <span data-bind="text: label.date, attr: { title: Kooboo.text.common.lastModified }"></span>
                <div class="pull-right">
                    <button class="btn btn-xs blue edit-label-btn" data-bind="click: $parent.editLabel.bind(this), tooltip: Kooboo.text.common.edit"><i class="fa fa-pencil"></i></button>
                </div>
            </div>
        </div>
    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>
<div data-bind="modal: showEditModal" class="modal fade" data-backdrop="static" data-keyboard="fasle">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-bind="click: onHideEditModal"><i class="fa fa-close"></i></button>
                <h4 class="modal-title">Edit label</h4>
            </div>
            <div class="modal-body">
                <!-- ko if: editingLabel -->
                <div class="form-group">
                    <label data-bind="text: editingLabel().name() + ' - ' + langName()"></label>
                    <textarea class="form-control autosize" data-bind="value: editingLabel().defaultValue" readonly disabled></textarea>
                </div>
                <div class="form-group">
                    <label data-bind="text: editingLabel().name() + ' - ' + mutliLangName()"></label>
                    <textarea class="form-control autosize" data-bind="value: newMultiLangValue"></textarea>
                </div>
                <!-- /ko -->
            </div>
            <div class="modal-footer">
                <button class="btn green" data-bind="click: onSaveEditModal">Save</button>
                <button class="btn gray" data-bind="click: onHideEditModal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/lib/waterfall.min.js",
            "/_Admin/Scripts/lib/jquery.textarea_autosize.min.js",
            "/_Admin/Scripts/components/kbBreadcrumb.js",
        ])
        Kooboo.loadCSS([
            "/_Admin/Styles/bootstrap-editable/css/bootstrap-editable.css"
        ])
    })()
</script>
<script src="/_Admin/View/Multilingual/Labels.js"></script>